<template>
  <div class="outBound-management-detail">
    <!-- 上方展示信息区域 -->
    <div class="header-info">
      <div class="info-left">
        <!-- 需求名称区域 -->
        <div class="requirement-name-container">
          <span class="requirement-name-title">出库编号：</span>
          <span class="requirement-name-value">{{ requirementData.requirementName || '出库编号' }}</span>
        </div>
        <!-- 其他信息区域 -->
        <div class="additional-info">
          <span class="requirement-no">关联合同：{{ requirementData.contractName || '-' }}</span>
          <span class="contract-no">物料类型：{{ requirementData.materialContent || '-' }}</span>
          <span class="requirement-no">客户名称：{{ requirementData.requirementNo || '-' }}</span>
          <span class="requirement-no">寄出人：'-'</span>
        </div>
        <div class="additional-info">
          <span class="requirement-type">物流单号：{{ requirementData.productionCount || 0 }}</span>
          <span class="material-content">收货地址：{{ requirementData.completedCount || 0 }}</span>
          <span class="create-time">收货人：{{ requirementData.totalOutput || 0 }}</span>
          <span class="create-time">收货人联系方式：{{ requirementData.totalOutput || 0 }}</span>
        </div>
        <div class="additional-info">
          <span class="creator">创建人：{{ requirementData.salesPerson || '-' }}</span>
          <span class="create-time">创建时间：{{ requirementData.createTime || '-' }}</span>
        </div>
      </div>
      <div class="info-right">
        <el-button @click="handleBack" plain>返回</el-button>
      </div>
    </div>

    <!-- 下方使用el-tabs实现页签切换 -->
    <div class="main-content-container">
      <el-tabs v-model="activeTab" style="width: 100%">

        <!-- 产品列表页签 -->
        <el-tab-pane label="产品列表" name="product">
          <div class="tab-content">
            <!-- 工具栏 -->
            <div class="toolbar">
              <el-button>批量下载标签</el-button>
            </div>
            
            <!-- 数据表格 -->
            <el-table :data="productList" style="width: 100%" border>
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="productNo" label="产品编号" align="left" />
              <el-table-column prop="productionOrder" label="生产加工单" align="left" />
              <el-table-column prop="status" label="当前状态" align="left" />
              <el-table-column prop="outBoundTime" label="排产时间" align="left" />
              <el-table-column prop="storageTime" label="入库时间" align="left" />
              <el-table-column prop="outboundTime" label="出库时间" align="left" />
              <el-table-column label="操作" align="left">
                <template #default="scope">
                  <el-link type="primary" @click="handleViewParams(scope.row)">查看参数</el-link>
                  <el-link type="primary" @click="handleViewTags(scope.row)" style="margin-left: 10px;">查看标签</el-link>
                </template>
              </el-table-column>
            </el-table>
            
            <!-- 分页 -->
            <el-pagination
              style="margin-top: 20px; justify-content: flex-end;"
              v-model:current-page="productQuery.pageNum"
              v-model:page-size="productQuery.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="productTotal"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleProductSizeChange"
              @current-change="handleProductCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 编辑弹窗组件 -->
    <EditProductoutBound
      v-model:visible="editVisible"
      :edit-data="editData"
      :is-batch="isBatchEdit"
      @success="handleEditSuccess"
      @cancel="handleEditCancel"
    />
    <!-- 查看参数组件 -->
    <view-params
      v-model:visible="viewParamsVisible"
      :row-data="viewParamsData"
      @close="handleViewParamsClose"
    />
    
    <!-- 查看标签组件 -->
    <view-tags
      v-model:visible="viewTagsVisible"
      :row-data="viewTagsData"
      @close="handleViewTagsClose"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
// 导入新组件
import ViewParams from './viewParams.vue';
import ViewTags from './viewTags.vue';
import EditProductoutBound from './editProductoutBound.vue'
import {
  getOutBoundDetail
} from '@/api/stock'

const router = useRouter();
const route = useRoute();
// 监听路由参数变化，更新流程信息
watch(
  () => route.params,
  (newParams) => {
    if (newParams.outBound) {
      getOutBoundDetail(newParams?.outBound).then(res => {
        if (res.code === 200 && res.data) {
          console.log('xxxxxx', res.data);
        } else {
          ElMessage.warning('获取流程详情失败')
        }
      }).catch(() => {
        ElMessage.error('获取流程详情失败')
      })
    }
  },
  { immediate: true, deep: true }
)
// 活动选项卡
const activeTab = ref('production');
// 需求参数内部选项卡
const requirementTab = ref('technical');

// 需求数据
const requirementData = reactive({
  requirementNo: '',
  requirementName: '',
  contractName: '',
  materialContent: '',
  productionCount: 0,
  completedCount: 0,
  totalOutput: 0,
  salesPerson: '',
  createTime: ''
});

// 生产加工单查询参数和分页信息
const productionQuery = reactive({
  pageNum: 1,
  pageSize: 10
});
const productionTotal = ref(0);

// 产品列表查询参数和分页信息
const productQuery = reactive({
  pageNum: 1,
  pageSize: 10
});
const productTotal = ref(0);

// 技术参数查询参数和分页信息
const technicalQuery = reactive({
  pageNum: 1,
  pageSize: 10
});
const technicalTotal = ref(0);

// 业务参数查询参数和分页信息
const businessQuery = reactive({
  pageNum: 1,
  pageSize: 10
});
const businessTotal = ref(0);

// 生产加工单数据
const productionOrderList = ref([
  {
    orderNo: 'SCJH001',
    quantity: 80,
    process: '-',
    startTime: '2025-04-28 15:12:03',
    endTime: null
  },
  {
    orderNo: 'SCJH002',
    quantity: 80,
    process: '下料',
    startTime: '2025-04-28 15:12:03',
    endTime: null
  },
  {
    orderNo: 'SCJH003',
    quantity: 40,
    process: '入库',
    startTime: '2025-04-28 15:12:03',
    endTime: '2025-04-28 15:12:03'
  }
]);

// 产品列表数据
const productList = ref([
  {
    productNo: 'CPBH001',
    productionOrder: 'xxxxx',
    status: '已入库',
    outBoundTime: '2025-03-30 17:09:02',
    storageTime: '2025-03-30 19:09:02',
    outboundTime: null,
    configName: '配置1、配置2、配置3',
  },
  {
    productNo: 'CPBH002',
    productionOrder: 'xxxxx',
    status: '待入库',
    outBoundTime: '2025-03-30 17:09:02',
    storageTime: '2025-03-30 19:09:02',
    outboundTime: null,
    configName: '配置1、配置2'
  },
  {
    productNo: 'CPBH003',
    productionOrder: 'xxxxx',
    status: '已出库',
    outBoundTime: '2025-03-30 17:09:02',
    storageTime: '2025-03-30 19:09:02',
    outboundTime: '2025-03-30 19:09:02',
    configName: '配置3'
  }
]);

// 技术参数数据
const technicalParamsList = ref([
  {
    field1: '填写的物料规格',
    field2: '填写的物料规格',
    field3: '填写的物料规格',
    field4: '填写的物料规格',
    field5: '填写的物料规格',
    field6: '填写的物料规格',
    field7: '填写的物料规格'
  },
  {
    field1: '参数1',
    field2: '参数1',
    field3: '参数1',
    field4: '参数1',
    field5: '参数1',
    field6: '参数1',
    field7: '参数1'
  },
  {
    field1: '参数2',
    field2: '参数2',
    field3: '参数2',
    field4: '参数2',
    field5: '参数2',
    field6: '参数2',
    field7: '参数2'
  },
  {
    field1: '参数4',
    field2: '参数4',
    field3: '参数4',
    field4: '参数4',
    field5: '参数4',
    field6: '参数4',
    field7: '参数4'
  },
  {
    field1: '参数5',
    field2: '参数5',
    field3: '参数5',
    field4: '参数5',
    field5: '参数5',
    field6: '参数5',
    field7: '参数5'
  },
  {
    field1: '参数6',
    field2: '参数6',
    field3: '参数6',
    field4: '参数6',
    field5: '参数6',
    field6: '参数6',
    field7: '参数6'
  },
  {
    field1: '参数7',
    field2: '参数7',
    field3: '参数7',
    field4: '参数7',
    field5: '参数7',
    field6: '参数7',
    field7: '参数7'
  }
]);

// 业务参数数据
const businessParamsList = ref([
  {
    field1: '参数1',
    field2: '参数1',
    field3: '参数1',
    field4: '参数1',
    field5: '参数1',
    field6: '参数1',
    field7: '参数1'
  },
  {
    field1: '参数2',
    field2: '参数2',
    field3: '参数2',
    field4: '参数2',
    field5: '参数2',
    field6: '参数2',
    field7: '参数2'
  },
  {
    field1: '参数4',
    field2: '参数4',
    field3: '参数4',
    field4: '参数4',
    field5: '参数4',
    field6: '参数4',
    field7: '参数4'
  },
  {
    field1: '参数5',
    field2: '参数5',
    field3: '参数5',
    field4: '参数5',
    field5: '参数5',
    field6: '参数5',
    field7: '参数5'
  },
  {
    field1: '参数6',
    field2: '参数6',
    field3: '参数6',
    field4: '参数6',
    field5: '参数6',
    field6: '参数6',
    field7: '参数6'
  },
  {
    field1: '参数7',
    field2: '参数7',
    field3: '参数7',
    field4: '参数7',
    field5: '参数7',
    field6: '参数7',
    field7: '参数7'
  }
]);

// 编辑相关状态
const editVisible = ref(false)
const editData = ref({})
const isBatchEdit = ref(false)
const selectedRows = ref([])

// 查看参数相关
const viewParamsVisible = ref(false);
const viewParamsData = ref({});

// 查看标签相关
const viewTagsVisible = ref(false);
const viewTagsData = ref({});

// 加载数据
const loadData = async () => {
  try {
    const requirementNo = route.params.requirementNo;
    
    // 模拟API调用 - 实际项目中应该根据requirementNo请求数据
    await new Promise(resolve => setTimeout(resolve, 300));
    
    // 模拟数据 - 实际项目中应该从API获取
    requirementData.requirementNo = requirementNo || 'XQ001';
    requirementData.requirementName = '需求名称1';
    requirementData.contractName = 'xxxx合同1; xxxx合同2';
    requirementData.materialContent = '卷帘门';
    requirementData.productionCount = 3;
    requirementData.completedCount = 1;
    requirementData.totalOutput = 200;
    requirementData.salesPerson = '李四(lisi)';
    requirementData.createTime = '2025-04-05 16:54:02';
    
    // 设置总数
    productionTotal.value = productionOrderList.value.length * 10;
    productTotal.value = productList.value.length * 10;
    technicalTotal.value = technicalParamsList.value.length * 10;
    businessTotal.value = businessParamsList.value.length * 10;
  } catch (error) {
    ElMessage.error('获取数据失败');
    console.error('获取数据失败:', error);
  }
};

// 处理返回按钮点击
const handleBack = () => {
  router.push({
    path: '/production/scheduling',
  });
};

// 处理选择变化
function handleSelectionChange(rows) {
  selectedRows.value = rows
  console.log('selectedRows', selectedRows.value);
  
}

// 处理编辑
function editoutBound(row) {
  isBatchEdit.value = false
  editData.value = {
    orderNo: row.requirementNo || '',
    currentStep: ''
  }
  editVisible.value = true
}

// 处理批量编辑
function handleBatchEdit() {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要编辑的数据')
    return
  }
  
  isBatchEdit.value = true
  // 合并选中的生产加工单号，用分号分隔
  const orderNos = selectedRows.value.map(row => row.orderNo).join('; ')
  editData.value = {
    orderNo: orderNos,
    currentStep: ''
  }
  editVisible.value = true
}

// 处理编辑成功
function handleEditSuccess(formData) {
  console.log('编辑成功，表单数据:', formData)
  ElMessage.success('编辑成功')
  // 实际项目中这里应该调用API更新数据
}

// 处理编辑取消
function handleEditCancel() {
  editData.value = {}
  isBatchEdit.value = false
}

// 处理查看参数
const handleViewParams = (row) => {
  viewParamsData.value = { ...row };
  viewParamsVisible.value = true;
};

// 处理查看参数关闭
const handleViewParamsClose = () => {
  viewParamsData.value = {};
};

// 处理查看标签
const handleViewTags = (row) => {
  viewTagsData.value = { ...row };
  viewTagsVisible.value = true;
};

// 处理查看标签关闭
const handleViewTagsClose = () => {
  viewTagsData.value = {};
};

// 生产加工单分页处理
const handleProductionSizeChange = (size) => {
  productionQuery.pageSize = size;
  // 实际项目中这里应该重新请求数据
  console.log('生产加工单每页条数改变为:', size);
};

const handleProductionCurrentChange = (current) => {
  productionQuery.pageNum = current;
  // 实际项目中这里应该重新请求数据
  console.log('生产加工单当前页改变为:', current);
};

// 产品列表分页处理
const handleProductSizeChange = (size) => {
  productQuery.pageSize = size;
  // 实际项目中这里应该重新请求数据
  console.log('产品列表每页条数改变为:', size);
};

const handleProductCurrentChange = (current) => {
  productQuery.pageNum = current;
  // 实际项目中这里应该重新请求数据
  console.log('产品列表当前页改变为:', current);
};

// 技术参数分页处理
const handleTechnicalSizeChange = (size) => {
  technicalQuery.pageSize = size;
  // 实际项目中这里应该重新请求数据
  console.log('技术参数每页条数改变为:', size);
};

const handleTechnicalCurrentChange = (current) => {
  technicalQuery.pageNum = current;
  // 实际项目中这里应该重新请求数据
  console.log('技术参数当前页改变为:', current);
};

// 业务参数分页处理
const handleBusinessSizeChange = (size) => {
  businessQuery.pageSize = size;
  // 实际项目中这里应该重新请求数据
  console.log('业务参数每页条数改变为:', size);
};

const handleBusinessCurrentChange = (current) => {
  businessQuery.pageNum = current;
  // 实际项目中这里应该重新请求数据
  console.log('业务参数当前页改变为:', current);
};

// 初始化
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.outBound-management-detail {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

/* 上方展示信息区域样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.info-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 需求名称容器 */
.requirement-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.requirement-name-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.requirement-name-value {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 额外信息区域 */
.additional-info {
  display: flex;
  align-items: center;
  gap: 0;
}

.info-left .requirement-no,
.info-left .requirement-type,
.info-left .creator {
  font-size: 14px;
  color: #606266;
  margin-right: 80px;
  min-width: 300px;
  display: inline-block;
  vertical-align: top;
}

.info-left .contract-no,
.info-left .material-content,
.info-left .create-time {
  font-size: 14px;
  color: #606266;
  margin-right: 80px;
  min-width: 300px;
  display: inline-block;
  vertical-align: top;
}

/* 最后一个元素不设置右边距 */
.info-left .additional-info span:last-child {
  margin-right: 0;
}

.info-right {
  display: flex;
  align-items: flex-start;
}

/* 下方主内容区域样式 */
.main-content-container {
  border-radius: 4px;
  overflow: hidden;
  min-height: 600px;
}

/* 工具栏样式 */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.export-tip {
  color: #909399;
  font-size: 12px;
}

/* 需求参数左右布局样式 */
.requirement-layout {
  display: flex;
  height: 540px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

/* 左侧选项卡样式 */
.left-sidebar {
  width: 200px;
  background-color: #f5f7fa;
  padding: 20px 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

.config-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 0;
}

.tab-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tab-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #2457d7;
  color: #fff;
}

.tab-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
}

.tab-item:not(.active) .dot {
  background-color: #409eff;
}

.tab-item.active .dot {
  background-color: #ccc;
}

.tab-text {
  font-size: 14px;
}

/* 右侧内容区域样式 */
.right-content {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  overflow-y: auto;
}

/* 参数内容样式 */
.parameter-total {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.contract-notice {
  margin-top: 15px;
  font-size: 14px;
  color: #f56c6c;
  text-align: center;
}

/* 移除原来的分页容器样式，使用el-pagination自身的样式 */
</style>